<template>
    <div>
        <ShopHeader></ShopHeader>
        <mt-navbar v-model="selected" class="navbar">
            <mt-tab-item id="1"><p class="class-item">商品</p></mt-tab-item>
            <mt-tab-item id="2"><p class="class-item">评价</p></mt-tab-item>
            <mt-tab-item id="3"><p class="class-item">商户</p></mt-tab-item>
        </mt-navbar>
        <Order v-if="selected == 1" v-on:getTotalPrice="getTotalPrice" ref="children"></Order>
        <Review v-else-if="selected ==2"></Review>
        <ShopInfo v-else></ShopInfo>
        <ShopFooter ref="child" v-on:delNum="delNum" v-if="selected == 1"></ShopFooter>
    </div>
</template>
<script>
import ShopHeader from '../components/shop-header'
import Order from '../components/order'
import ShopInfo from '../components/shop-info'
import Review from '../components/review'
import ShopFooter from '../components/shop-footer'
export default {
    name: 'info',
    data() {
        return {
            shopInfo:{},
            selected:1
        }
    },
    methods:{
        getTotalPrice(data){
            // console.log(1);
            this.$refs.child.getTotalPrice();
        },
        delNum(){
            this.$refs.children.delNum();
        }
    },
    components:{ShopHeader,Order,ShopInfo,Review,ShopFooter}
}
</script>
<style scoped>
    .mint-navbar .mint-tab-item.is-selected {
        border-bottom: 0.09375rem solid #F23D3D;
        color: #F23D3D;
        font-size: 1rem;
    }
    .navbar {
        margin-bottom: 0.2rem;
        height: 1.5rem;
    }
    .class-item {
        height: 1.2rem;
        font-size: 1.2rem;
        line-height: 1.2rem;
        font-weight: 800;
    }
</style>